<template>
  <div class="right-top">
    <el-input :value="hostValue" @input="changeValue" placeholder="请输入项目地址(ip:port/proName)" class="input-host"></el-input>
    <el-button type="primary" class="operate-button">
      <a :href="downloadInputParams" class="export-input-param">导出出/入参数</a>
    </el-button>
    <el-button type="primary" class="operate-button">
      <a :href="downloadTemplateUrl" class="export-input-param">导出所选项目</a>
    </el-button>
    <div class="records-list">
      <span class="refresh" @click="refreshRecords" v-show="showTopDetail">刷新</span>
      <div v-show="!showTopDetail" class="no-detail">
        <h2 class="title">最新三条修改记录</h2>
        <div class="expand" @click="changeShowTopDetail">展开</div>
      </div>
      <div v-show="showTopDetail" class="detail">
        <template v-if="!noData">
          <dl class="record" v-for="item of records" :key="item.id" @click="clickRecord(item.uid)">
            <dt v-if="item.modifyDesc.title">
              <h1 class="title" v-text="item.modifyDesc.title"></h1>
            </dt>
            <dd>
              <div class="content">
                <p v-text="item.modifyDesc.content"></p>
              </div>
              <div class="time">
                <span>修改时间: </span>
                <span v-text="format(new Date(item.modifyDesc.createTime))"></span>
              </div>
            </dd>
          </dl>
          <div class="collapse" @click="changeShowTopDetail">收起</div>
        </template>
        <no-data size="50px" fontSize="16px" v-else></no-data>
      </div>
    </div>

    <!-- 弹框显示修改 -->
    <el-dialog title="添加修改记录" :visible.sync="showRecordDetail" class="update-record" center>
      <div slot="title" class="dialog-title">
        <h1>修改记录详情信息</h1>
      </div>
      <div class="record-form">
        <record-detail :uid="selectedUid"></record-detail>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { request } from "@/js/_x/utils/request";
import { format } from "@/js/_x/utils/date";
import { mapState, mapMutations } from 'vuex'
import NoData from "../../../common/noData"
import RecordDetail from "./recordDetail";
import G from "@/js/_x/g.js"

export default {
  name: "right-top",
  components: {
    NoData,
    RecordDetail
  },
  watch: {
    currentIntf: function () {
      this.getRecordList()
    }
  },
  computed: {
    ...mapState({
      currentProject: state => state.aside.currentProject,
      currentIntf: state => state.aside.currentIntf,
      hostValue: state => state.rightTop.hostValue
    }),
    downloadInputParams () {
      const url = `${G.dataServices}/api/interface/parameter/export_parameter_check?projectName=${this.currentProject}`
      return url
    },
    downloadTemplateUrl () {
      const url = `${G.dataServices}/api/interface/document/export_document?projectName=${this.currentProject}`
      return url
    }
  },
  data () {
    return {
      showRecordDetail: false,
      // 去前几条数据
      topNum: 3,
      // 定时器，间隔多少毫秒刷新最新的的记录数据
      delayTime: 60000,
      noData: false,
      // 收起和展开之间切换
      showTopDetail: true,
      // hostValue: "",
      selectedUid: "",
      records: []
    }
  },
  methods: {
    ...mapMutations("rightTop",{
      changeHostValue: "changeHostValue"
    }),
    format,
    changeValue(value) {
      // console.log(e)
      this.changeHostValue(value)
    },
    changeShowTopDetail () {
      this.showTopDetail = !this.showTopDetail
    },
    /* 获取最近三次修改记录 */
    getRecordList () {
      let params = {
        projectName: this.currentProject,
        id: this.currentIntf.id
      }
      request("api/interface/node/get_latest_three", params, resp => {
        if (resp.result && resp.data && resp.data.length > 0) {
          this.noData = false
          this.records = resp.data.slice(0, this.topNum)
        } else {
          this.noData = true
        }
      }).catch(error => {
        this.noData = true
        console.log(error);
      })
    },
    changeShowRecordDetail () {
      this.showRecordDetail = !this.showRecordDetail
    },
    // 点击标题时打开弹框显示详情数据
    clickRecord (uid) {
      this.selectedUid = uid
      this.changeShowRecordDetail()
    },
    // 刷新重新获取数据
    refreshRecords () {
      this.getRecordList()
    }
  },
  mounted () {
    this.getRecordList()
    // 设置一个定时器，定时刷新前三条数据
    setInterval(() => {
      this.getRecordList()
    }, this.delayTime)
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/home/content/rightTop.scss";
</style>
